<script setup>
import {ref,onMounted} from "vue";
import { ElMessage ,ElMessageBox} from 'element-plus';
import {queryAllApi,addApi,queryByIdApi,updateApi,deleteApi} from "@/api/dept";

// 表单
const deptList=ref([]);
const search= async ()=>{
  const result = await queryAllApi();
  deptList.value=result.data;
}

onMounted(()=>{
  search(); 
})

// 对话框
const dialogFormVisible = ref(false);
const deptFrom=ref({
  name : ''
});
const formTitle = ref('');
//新增部门对话框
const addDept = () => {
  formTitle.value = '新增部门';
  dialogFormVisible.value = true;
  deptFrom.value = {name:''}
  if (deptFormRef.value){
    deptFormRef.value.resetFields();
  } 
}


// 表单引用
const deptFormRef = ref();
//保存
const save= async()=>{
  if(!deptFormRef.value) return;
  await deptFormRef.value.validate( async(valid)=>{
    if(valid){
      let result;
      if(deptFrom.value.id){//修改
        result=await updateApi(deptFrom.value);
      }else{//新增
        result=await addApi(deptFrom.value);
      }
      if(result.code){//成功
        ElMessage.success(result.msg);
        dialogFormVisible.value=false;
        search();
      }else{
        ElMessage.error(result.msg);
      }
    }else{
      ElMessage.error('表单校验失败');
    }
  })
}
//表单校验
const rules = ref({
  name: [
    { required: true, message: '请输入部门信息', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
  ]
})



  //根据ID查询数据
  const handleEdit = async (id)=>{
    const result=await queryByIdApi(id);
    if(result.code){
      if (deptFormRef.value){
      deptFormRef.value.resetFields();
      } 
      dialogFormVisible.value=true;
      formTitle.value = '修改部门';
      deptFrom.value=result.data;
    }
  }

  //删除
  const handleDelete=async(id) =>{
    ElMessageBox.confirm('确认删除数据吗?','提示',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'error'}
  ).then(async() => {
    const result=await deleteApi(id);
    if(result.code){
      ElMessage.success(result.msg);
      search();
    }else{
      ElMessage.error(result.msg);
    }
    }).catch(() => {
      ElMessage.info("取消删除")
    })
  }
</script>

<template>
      <h1>部门管理</h1>

    <!-- 按钮靠页面右侧显示 -->
    <el-button type="primary" @click="addDept()" style="float: right;"> + 新增部门</el-button> <br><br>

    <!-- 表格 -->
    <el-table :data="deptList" border style="width: 100%;">
      <el-table-column type="index" label="序号" width="100" align="center"/>
      <el-table-column prop="name" label="部门名称" width="300" align="center"/>
      <el-table-column prop="updateTime" label="最后修改时间" width="300" align="center"/>
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="deptFrom" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="deptFrom.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save"> 提交</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>
